<template>
	<view>
		<u-section style="padding: 20rpx 30rpx;" :title="'序号' + (index + 1)" :right="false">
			<block slot="right" v-if="value.editable" >
				<u-button class="u-m-l-20" size="mini" type="warning" @tap="$emit('edit')" >编辑</u-button>
				<u-button v-if="applyType != 3" class="u-m-l-20" size="mini" @tap="$emit('delete')" type="error">删除</u-button>
			</block>
			<block slot="right" v-if="applyType == 2 && !readonly" >
				<u-button v-if="applyType != 3" class="u-m-l-20" size="mini" type="warning" @tap="$emit('edit')" >验收</u-button>
			</block>
		</u-section>
		<u-form style="padding: 0 30rpx;">
			<block v-for="(apply, index) in value.ApplyList" :key="index">
				<u-form-item label-position="left" label-align="right" label="品牌" :label-width="150" style="padding: 0;" :border-bottom="true">
					<u-input type="text" inputAlign="right" :disabled="true" :border="false" :value="getBrandName(apply.BrandId)"></u-input>
				</u-form-item>
				<view class="u-m-t-10" >
					<view v-for="(product, pIndex) in apply.ProductList" :key="'product' + pIndex" >
						<view style="">
							<u-form-item label-position="left" label-align="right" label="代码及描述" :label-width="150" :border-bottom="true" style="padding: 0; ">
								<u-input type="text" placeholder="" inputAlign="right" :disabled="true" :border="false" :value="getProductName(product.ProductId, apply.ProductBaseList)"></u-input>
							</u-form-item>
							<u-form-item :label-width="150" label-position="left" label-align="right" label="库存" :border-bottom="true" style="padding: 0;">
								<u-input inputAlign="right" type="text" :disabled="true" :border="false" placeholder="" :value="getStock(product.ProductId, apply.ProductBaseList)"></u-input>
							</u-form-item>
							<u-form-item v-if="applyType == 1" :label-width="150" label-position="left" label-align="right" label="申请数量" style="padding: 0;" :border-bottom="true">
								<u-input inputAlign="right" type="text" :disabled="true" :border="false" placeholder="" :value="product.Number"></u-input>
							</u-form-item>
							
							<block v-if="applyType == 2 || applyType == 3">
								<u-row>
									<u-col :span="4">
										<u-form-item label-position="top" label-align="center" label="数量" :border-bottom="true" style="padding: 0;">
											<u-input inputAlign="center" type="text" :disabled="true" :border="false" :value="product.Number"></u-input>
										</u-form-item>
									</u-col>
									<u-col :span="4">
										<u-form-item label-position="top" label-align="center" label="验收数量" :border-bottom="true" style="padding: 0;">
											<u-input inputAlign="center" type="text" placeholder="" :disabled="false" :border="false" :value="product.CheckNumber"></u-input>
										</u-form-item>
									</u-col>
									<u-col :span="4">
										<u-form-item label-position="top" label-align="center" label="差异数量" :border-bottom="true" style="padding: 0;">
											<u-input inputAlign="center" type="text" placeholder="" :disabled="false" :border="false" :value="product.DifferencesNum"></u-input>
										</u-form-item>
									</u-col>
								</u-row>
							</block>
						</view>
						<u-gap bg-color="#f5f5f5" :height="10"></u-gap>
					</view>
				</view>
				<u-form-item label-position="left" label="申请时间" label-align="right" :label-width="150" :border-bottom="true" style="padding: 0;">
					<u-input :disabled="true" :border="false" inputAlign="right" :value="apply.ApplyTime | date('yyyy-mm-dd hh:MM')"></u-input>
				</u-form-item>
				<u-form-item label-position="left" label="申请备注" label-align="right" :label-width="150" :border-bottom="true" style="padding: 0;">
					<u-input :disabled="true" :border="false" placeholder="" inputAlign="right" :value="apply.Remark"></u-input>
				</u-form-item>
				<block v-if="applyType == 2 || applyType == 3">
					<u-form-item label-position="left" label="验收时间" label-align="right" :label-width="150" :border-bottom="true" style="padding: 0;">
						<u-input :disabled="true" :border="false" placeholder="" inputAlign="right" :value="timeFormat(apply.CheckTime)"></u-input>
					</u-form-item>
					<u-form-item label-position="left" label="验收备注" label-align="right" :label-width="150" :border-bottom="false" style="padding: 0;">
						<u-input :disabled="true" :border="false" placeholder="" inputAlign="right" :value="apply.CheckRemark"></u-input>
					</u-form-item>
				</block>
				
			</block>
		</u-form>
		<u-gap :height="20" bg-color="#eaecef" :margin-top="10" :margin-bottom="20"></u-gap>
	</view>
</template>

<script>
export default {
	name: 'outdoor-apply',
	props: {
		index: {
			type: Number,
			default: 0
		},
		applyType: {
			type: Number,
			default: 1
		},
		readonly: {
			type: Boolean,
			default: false
		},
		value: {
			type: Object,
			default() {
				return {
					Type: '',
					ApplyForType: '',
					BrandId: '',
					ApplyTime: '',
					Remark: '',
					BillNo: '',
					State: '',
					StateName: '',
					ProductList: [],
					ProductBaseList: []
				};
			}
		}
	},
	data() {
		return {
			customStyle: {
				height: '50rpx',
				lineHeight: '50rpx'
			},

			selectType: 4,

			brandList: [],
			showBrandPicker: false,
			brandPickerIndex: -1,
			brand: {},

			productList: [],
			showProductPicker: false,
			productPickerIndex: -1,
			product: {}
		};
	},

	created() {
		this.getBrandList();
	},

	methods: {
		
		timeFormat(time) {
			if(time > 0) {
				return this.$u.date(time, 'yyyy-mm-dd hh:MM')
			}
			return ''
		},
		
		getStock(productId, productList) {
			const product = productList.find(item => item.Key == productId);
			if(product) {
				return product.StockNumber
			}
			return ''
		},
		
		getBrandName(brandId) {
			const brand = this.brandList.find(item => item.Key == brandId);
			if (brand) {
				return brand.Value;
				x;
			}
			return '';
		},

		getProductName(productId, productList) {
			const product = productList.find(item => item.Key == productId);
			if (product) {
				return product.Value;
			}
			return '';
		},

		getBrandList() {
			this.$u.api
				.getBrandDic({
					SelectType: this.selectType
				})
				.then(res => {
					const { ResultCode, Module_BrandList, Shell_Pro_BrandList, Entity_Pro_BrandList, Outdoor_BrandList } = res;
					if (ResultCode === 1) {
						if (this.selectType == 1) {
							this.brandList = Module_BrandList;
						}
						if (this.selectType == 2) {
							this.brandList = Shell_Pro_BrandList;
						}
						if (this.selectType == 3) {
							this.brandList = Entity_Pro_BrandList;
						}
						if (this.selectType == 4) {
							this.brandList = Outdoor_BrandList;
						}
					}
				});
		}

		// getProductList(brandId) {
		// 	this.$u.api
		// 		.getProductDic({
		// 			SelectType: this.selectType,
		// 			BrandId: brandId
		// 		})
		// 		.then(res => {
		// 			console.log(res);
		// 			const { ResultCode, ProductList } = res;
		// 			if (ResultCode === 1) {
		// 				this.productList = ProductList;
		// 			}
		// 		});
		// },

		// onBrancPickerChange(e) {
		// 	if (!e[0].value || !e[0].label) {
		// 		if (this.brandList.length > 0) {
		// 			this.brand = {
		// 				label: this.brandList[0].Value,
		// 				value: this.brandList[0].Key
		// 			};
		// 		} else {
		// 			return false;
		// 		}
		// 	} else {
		// 		this.brand = e[0];
		// 	}
		// 	this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.brand.value);
		// },

		// onProductPickerChange(e) {
		// 	if (!e[0].value || !e[0].label) {
		// 		if (this.productList.length > 0) {
		// 			this.product = {
		// 				label: this.productList[0].Value,
		// 				value: this.productList[0].Key
		// 			};
		// 		} else {
		// 			return false;
		// 		}
		// 	} else {
		// 		this.product = e[0];
		// 	}
		// 	this.productPickerIndex = this.productList.findIndex(item => item.Key == this.product.value);
		// }
	}
};
</script>

<style lang="scss"></style>
